<template>
  <div>
    <search-bar placeHolder='请输入维修厂名称'
                @handleSearch='init' />
    <table-main :tableData='JoinData'
                :total='total'
                :page.sync='page'
                @pagination='init'>
      <el-table-column align="center"
                       label="维修厂名称"
                       prop='company'>
      </el-table-column>
      <el-table-column align="center"
                       label="负责人"
                       prop='leader'>
      </el-table-column>

      <el-table-column align="center"
                       label="联系电话"
                       prop='phone'>
      </el-table-column>
      <el-table-column align="center"
                       label="地址">
        <template slot-scope="scope">
          <el-popover placement="top-start"
                      title="地址"
                      width="200"
                      trigger="hover"
                      :content="`${scope.row.province}${scope.row.city}${scope.row.county}`">
            <el-button type="text"
                       class="popoverBtn"
                       slot="reference">{{`${scope.row.province}${scope.row.city}${scope.row.county}`}}</el-button>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       label="物料">
        <template slot-scope="scope">
          <el-button type="text"
                     @click='dialogState.materielVisible=true,rationDetail(scope.row)'>详情</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       label="预警">
        <template slot-scope="scope">
          <el-button type="text"
                     @click='dialogState.warningVisible=true,warning(scope.row)'>详情</el-button>
        </template>
      </el-table-column>
    </table-main>
    <v-dialog title="物料详情"
              :show.sync='dialogState.materielVisible'>
      <el-table border
                :data="rationData">
        <el-table-column label="物料名称"
                         prop="name"
                         align="center">
        </el-table-column>
        <el-table-column label="配给数量"
                         prop="ration"
                         align="center">
        </el-table-column>
        <el-table-column label="剩余库存"
                         prop="stock"
                         align="center">
        </el-table-column>
      </el-table>
    </v-dialog>
    <v-dialog title="预警详情"
              :show.sync='dialogState.warningVisible'>
      <el-table :data="warningDetails.data">
        <el-table-column align="center"
                         label="接收人名称"
                         prop="name">
        </el-table-column>
        <el-table-column align="center"
                         label="接收人身份">
          <template slot-scope="scope">
            {{scope.row.type===1 ? '运营商' : scope.row.type===2 ? '总后台' : '供应商'}}
          </template>
        </el-table-column>
        <el-table-column align="center"
                         label="订单状态">
          <template slot-scope="scope">
            {{ scope.row.type === 0 ? '审核中' : scope.row.type===1 ? '已发货' : scope.row.type===2 ? '已完成' : '订单关闭'}}
          </template>
        </el-table-column>
        <el-table-column align="center"
                         label="申请时间"
                         prop="create_time"
                         width="160">
        </el-table-column>
        <el-table-column align="center"
                         label="发货时间"
                         width="160">
          <template slot-scope="scope">
            {{scope.row.audit_time | timestamp}}
          </template>
        </el-table-column>
        <el-table-column align="center"
                         label="完成时间"
                         width="160">
          <template slot-scope="scope">
            {{scope.row.over_time | timestamp}}
          </template>
        </el-table-column>
        <el-table-column align="center"
                         label="物料详情">
          <template slot-scope="scope">
            <el-button type="text"
                       v-popover:popover4>详情</el-button>
            <el-popover ref="popover4"
                        placement="bottom"
                        width="400"
                        trigger="hover">
              <el-table border
                        :data="scope.row.detail">
                <el-table-column align="center"
                                 label="物料数量（L）"
                                 prop="num"></el-table-column>
                <el-table-column align="center"
                                 label="物料名称"
                                 prop="materiel"></el-table-column>
                <el-table-column align="center"
                                 label="物料备注"
                                 prop="remarks"></el-table-column>
              </el-table>
            </el-popover>
            <!-- <el-popover ref="popover1"
                        placement="right"
                        title="物料详情"
                        width="200"
                        trigger="hover">
            
            
            </el-popover> -->
          </template>
        </el-table-column>
      </el-table>
      <!-- 预警详情分页 -->
      <v-pagination :total='warningDetails.total'
                    :page.sync='warningDetails.page'
                    @pagination='warning' />
    </v-dialog>
    <!-- 加盟维修厂列表分页 -->
    <!-- <v-pagination :total='total'
                  :page.sync='page'
                  @pagination='init' /> -->
  </div>
</template>

<script>
export default {
  data () {
    return {
      page: 1,// 当前页
      total: 0, //总页数
      JoinData: [],
      dialogState: {
        materielVisible: false,
        warningVisible: false
      },
      rationData: [], //物料详情
      warningDetails: { //预警详情
        data: [],
        page: 1, //当前页,
        total: 0, //总页数
      },
      search: null
    }
  },
  methods: {
    async init (data) {
      this.search = data
      try {
        const res = await this.api.rationList(Object.assign({}, data, { page: this.page }))
        this.JoinData = res.data.list || []
        this.total = res.data.rows || 0
      } catch (err) {
        throw (err)
      }
    },
    async rationDetail (row) { //物料详情
      try {
        const res = await this.api.rationDetail({ sid: row.id })  //sid 维修厂id
        this.rationData = res.data || []
      } catch (err) {
        throw (err)
      }
    },
    async warning (row) {  //预警详情
      try {
        const res = await this.api.rationWarn({ sid: row.id, page: this.warningDetails.page })
        this.warningDetails.data = res.data.list || []
        this.warningDetails.total = res.data.rows || 0
      } catch (err) {
        throw (err)
      }
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>
.popoverBtn {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
